<ActivityView v-deep>
    <ActivityTitle is-app-title v-deep :inert="anyPageRunning">NDEF</ActivityTitle>
    <style>[inert]>>>{opacity: 0.5;}</style>
    <ActivityBody style="overflow: hidden; display: flex; flex-direction: column;">
        <div><ElSegmented v-model="currentTab" :options="tabsAvailable" size="large" :disabled="anyPageRunning" /></div>

        <div class="tabContainer" v-deep>
            <div v-if="currentTab === 'read'">
                <div v-deep class="input-area">
                    <ElButton :disabled="anyPageRunning" style="flex: 1;" type="primary" plain @click="readNdefData(READ_INDEEP)">快速读取</ElButton>
                    <ElButton :disabled="anyPageRunning" style="flex: 1;" type="primary" plain @click="readNdefData(null)">深度读取</ElButton>
                    <div v-if="showReadOptionPopover" style="position: fixed; inset: 0; z-index: 1; background: #ffffff; opacity: 0.5;" @click="showReadOptionPopover = false"></div>
                    <ElPopover trigger="manual" :visible="showReadOptionPopover" width="400">
                        <template #reference>
                            <ElButton ref="showReadOptionPopoverBtn" @click="showReadOptionPopover = !showReadOptionPopover" style="margin-left: 0.5em;" :disabled="anyPageRunning" @keydown.esc.extra.stop="showReadOptionPopover = false"><ElIcon><MoreFilled /></ElIcon></ElButton>
                        </template>
                        <div v-if="showReadOptionPopover" style="display: flex; flex-direction: column; white-space: nowrap;" @keydown.esc.extra.stop="showReadOptionPopover = false">
                            <div>分析已有的转储文件：</div>
                            <ElSelect v-model="dump.file" style="margin: 0.5em 0; flex: 1;">
                                <ElOption v-for="item in (dump.files)" :value="item">{{item}}</ElOption>
                            </ElSelect>
                            <div>类型：</div>
                            <ElRadio v-model="dump.type" value="m1">Mifare Classic</ElRadio>
                            <ElRadio v-model="dump.type" value="m0">Mifare Ultralight</ElRadio>
                            <ElRadio v-model="dump.type" value="m0">或 NTag</ElRadio>
                            <div style="display: flex;">
                                <ElButton style="flex: 1;" @click="loadDumpfileList">重新加载文件列表</ElButton>
                                <ElButton style="flex: 1;" type="primary" plain @click="readNdefData(READ_DUMP)" :disabled="anyPageRunning">开始分析</ElButton>
                            </div>
                        </div>
                    </ElPopover>
                </div>
                <div v-deep v-if="pages[0] === 2">
                    <h1 style="text-align: center;">正在读取，请稍候...</h1>
                    <ElProgress :percentage="50" :indeterminate="true" :duration="3" :show-text="false" />
                </div>
                <div v-if="pages[0] === 10099">
                    <div>找到 {{rawRecord.length}} 条记录, 其中 {{record.length}} 条已解析</div>
                    <div v-if="extraReadTipText" style="font-weight: bold;" v-text="extraReadTipText"></div>
                    <template v-for="(data, index) in record">
                        <NdefRecord :data="data" :index="index" />
                    </template>
                </div>
                <div v-text="errorText" class="errorText" v-deep></div>
            </div>

            <div v-if="currentTab === 'write'" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                <template v-if="pages[1] === 1">
                    <div v-deep class="input-area">
                        <ElPopover trigger="click" width="250">
                            <template #reference>
                                <ElButton>添加记录</ElButton>
                            </template>

                            <ElSelect v-model="recordAddType">
                                <ElOption v-for="i in recordAddTypes" :value="i" v-text="i"></ElOption>
                            </ElSelect>
                            <div style="margin-top: 0.5em;">或...</div>
                            <ElButton @click="copyDataFromReaded" style="margin-top: 0.5em; width: 100%;">加载「读标签」页的记录</ElButton>
                        </ElPopover>
                        <ElButton @click="clearWriteRecord">清除</ElButton>
                        <ElButton style="flex: 1; " type="primary" plain @click="writeTag">开始写入 ({{writeRecord.length}})</ElButton>
                        <ElPopover trigger="click" width="250">
                            <template #reference>
                                <ElButton>仅创建转储文件</ElButton>
                            </template>

                            <div style="text-align: center; margin-bottom: 0.5em;">选择标签类型</div>
                            <b style="display: block;">注意：禁止用此处生成的转储文件写入到 Ultralight 或 Ntag 标签中，否则文件格式不同，可能导致损坏！</b>
                            <div style="display: flex; flex-direction: column; align-items: center;">
                                <ElButton text @click="writeTag({ createOnly: true, type: 'm1' })">Mifare Classic S50 1K</ElButton>
                                <ElButton text @click="writeTag({ createOnly: true, type: 'm0' })">Mifare Ultralight</ElButton>
                                <ElButton text @click="writeTag({ createOnly: true, type: 'm0' })">Ntag 21x</ElButton>
                            </div>
                        </ElPopover>
                    </div>
                    <div style="font-size: small;"><b>* 小提示: </b><span>点击对应记录可以查看详细信息！</span></div>
                    <div class="data-container" v-deep style="overflow: auto; flex: 1;">
                        <template v-for="(data, index) in writeRecord">
                            <NdefRecord
                                v-model="data"
                                :index="index"
                                :open-hex-view="data?.hexView"
                                @dont-open-hex-view="dontOpenHexView(data)"
                                @updated="(event) => updateWRData(index, event)"
                                @move="({index, direction}) => updateWRData(index, null, { direction })"
                                @delete_record="() => updateWRData(index, null, { 'delete': true })"
                            />
                        </template>
                    </div>
                </template>
            </div>

            <div v-if="currentTab === 'more'">
                <div v-deep class="input-area"><ElButton style="flex: 1;" @click="clearTag(0)">清空标签</ElButton></div>
                <div v-deep class="input-area"><ElButton style="flex: 1;" @click="clearTag(1)">格式化标签</ElButton></div>
                <div v-deep class="input-area"><ElButton style="flex: 1;" @click="lockTag">锁定标签</ElButton></div>
                <!-- <div v-deep class="input-area"><ElButton style="flex: 1;" @click="nop">设置密码</ElButton></div>
                <div v-deep class="input-area"><ElButton style="flex: 1;" @click="nop">删除密码</ElButton></div> -->
            </div>

        </div>

        <dialog ref="progDlg" v-deep @cancel.prevent="() => { return false }">
            <div v-if="pages[1] === 3" style="font-size: x-large;">
                <span>正在写入，请稍候...</span>
            </div>
            <div v-if="pages[2] === 3" style="font-size: x-large;">
                <span>正在执行，请稍候...</span>
            </div>
            <div v-if="pages[1] === 9999 || pages[2] === 9999" style="display: flex; flex-direction: column; align-items: center;">
                <div style="font-size: x-large; margin-bottom: 0.5em;">写入完成!</div>
                <ElButton type="success" size="large" plain @click="doneWriteOperation">完成</ElButton>
            </div>
            <div v-if="pages[1] === 999 || pages[2] === 999" style="display: flex; flex-direction: column; align-items: center;">
                <div style="font-size: x-large; margin-bottom: 0.5em; background: #ffaaaa;">写入失败!</div>
                <ElButton type="danger" size="large" plain @click="doneWriteOperation">关闭</ElButton>
                <details style="margin-top: 0.5em;">
                    <summary>详细信息</summary>
                    <div v-text="errorText" style="border: 1px solid gray; border-radius: 10px; margin-top: 0.5em; padding: 0.5em; white-space: pre-wrap; word-break: break-all;"></div>
                </details>
            </div>
        </dialog>

    </ActivityBody>
    
    <style>
        .tabContainer>>> {
            margin-top: 0.5em;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
        }

        .input-area>>> {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    
        .input-area>>> {
            margin-bottom: 0.5em;
        }
    
        .input-area>>>.el-input,
        .input-area>>>.el-select {
            --el-input-width: auto;
            --el-select-width: auto;
        }

        .errorText>>> {
            font-size: larger;
            white-space: break-spaces;
            word-break: break-all;
        }
        .errorText>>>:empty {
            display: none;
        }
        .errorText>>>::before {
            content: "[错误]";
            font-weight: bold;
            color: red;
            margin-right: 0.5em;
        }
    
        .my-dialog>>> {
            width: var(--size);
            height: var(--size);
            --size: calc(100%);
            max-width: 100%;
            max-height: 100%;
            box-sizing: border-box;
            padding: 0;
            border: 0;
            z-index: 999;
            position: fixed;
            inset: 0;
        }
    
        dialog>>>::backdrop {
            transition: all 0.2s allow-discrete;
        }
    </style>
</ActivityView>